<template>
  <div class="page-container">
    <!-- 筛选区域 -->
    <el-form :inline="true" :model="queryParams" class="mb-4">
      <el-form-item label="采购合同编号">
        <el-input
          v-model="queryParams.contractNo"
          placeholder="请输入"
          clearable
          class="input-bordered"
        />
      </el-form-item>

      <el-form-item label="交货日期">
        <el-date-picker
          v-model="queryParams.deliveryDateRange"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="handleQuery">查询</el-button>
        <el-button @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <!-- 表格区域 -->
    <el-table :data="tableData" border stripe style="width: 100%">
      <el-table-column label="采购合同签订日期" prop="signDate" width="160" />
      <el-table-column label="采购合同编号" prop="contractNo" width="180" />
      <el-table-column label="公司名称" prop="companyName" />
      <el-table-column label="交货日期" prop="deliveryDate" width="160" />
      <el-table-column label="货物明细" width="100">
        <template #default="{ row }">
          <el-link type="primary" @click="handleViewDetail(row)">查看</el-link>
        </template>
      </el-table-column>
      <el-table-column label="备注" prop="remark" />
    </el-table>

    <!-- 分页器 -->
    <div class="pagination-wrapper">
      <el-pagination
        background
        layout="total, prev, pager, next, sizes, jumper"
        :total="total"
        :page-size="pageSize"
        :current-page="pageNum"
        :page-sizes="[10, 20, 50, 100]"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      />
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const queryParams = ref({
  contractNo: '',
  deliveryDateRange: []
})

const tableData = ref([
  {
    signDate: '2025-02-14',
    contractNo: 'HT984424508',
    companyName: '春秋商贸有限公司',
    deliveryDate: '2025-05-28',
    remark: '无需备注'
  },
  {
    signDate: '2025-03-01',
    contractNo: 'HT123456789',
    companyName: '汉唐供应链管理公司',
    deliveryDate: '2025-08-15',
    remark: '优先交付'
  }
])

const total = ref(2)
const pageSize = ref(10)
const pageNum = ref(1)

const handleQuery = () => {
  ElMessage.success('执行查询操作')
  // TODO: 接接口更新 tableData、total
}

const resetQuery = () => {
  queryParams.value.contractNo = ''
  queryParams.value.deliveryDateRange = []
}

const handleViewDetail = (row) => {
  ElMessage.info(`查看合同 ${row.contractNo} 的货物明细`)
}

const handleSizeChange = (val) => {
  pageSize.value = val
  // TODO: 请求新分页数据
}

const handlePageChange = (val) => {
  pageNum.value = val
  // TODO: 请求新分页数据
}
</script>

<style scoped>
.page-container {
  width: 80%;
  margin: 0 auto;
  padding: 20px 0;
}

.mb-4 {
  margin-bottom: 16px;
}

.input-bordered {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}

.pagination-wrapper {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
  margin-right: 8px;
}
</style>
